import React, { useState } from 'react';
import ReactDOM from 'react-dom';

/* 
   高阶组件（HOC）
   一个函数 这个函数接收一个组件作为参数 返回值是一个新组件


   状态提升 把本来属于本组件的state提升到父组件  以达到提升组件复用性的效果
*/

function connectcopy(Com) {
  return class Temp extends React.Component {
    state = {
      qq: 123
    }
    render() {
      return <>
        这是自己的高阶组件处理的结果
        <Com qq={this.state.qq} {...this.props} />
      </>
    }
  }
}

function connect(cb1, cb2) {
  return function (Com) {
    return class Temp extends React.Component {
      render() {
        return <Com {...cb1()} {...cb2()} />
      }
    }
  }
}


// function Show() {
//   let [name, setN] = useState("珠峰")
//   return <h1 onClick={() => { setN(88) }}>{name}</h1>
// }
function Show(props) {
  let { name, changeName } = props
  return <h1 onClick={changeName}>{name}</h1>
}
class App extends React.Component {
  state = {
    name: "珠峰888"
  }
  f = () => {
    this.setState({
      name: "珠峰999"
    })
  }
  render() {
    console.log(this.props)
    return <div className=''>
      App组件
      <Show name={this.state.name} changeName={this.f} />
    </div>;
  }
}
App = connect(() => {
  return {
    qq: 123
  }
}, () => {
  return {
    f() {
      console.log(666)
    }
  }
})(App)

ReactDOM.render(<App className='box' q={1} w={2} />, document.getElementById('root'))